{% extends "../../base.html" %}

{% block crumbs %}
<div class="row">
    <div class="col-md-12">
        <ol class="breadcrumb"> 
            <li class="active">
                <a class="this">Project</a>
            </li>
            <li class="active">
                <a class="this-page" href="/atp4p/project/">Test project</a>
            </li>
            <li class="active">
                <a class="">Create project</a>
            </li>
        </ol>
    </div>
</div>
{% endblock %}

{% block body %}

<div class="row">
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Create project</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" method="post" id="form_save">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Project name</label>
                        <div class="col-sm-6">
                            <input type="text" name="project" class="form-control" onkeyup="value=value.replace(/[^0-9a-zA-Z-_.]/g,'')" placeholder="English letters or numbers -_."  autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Project description</label>
                        <div class="col-sm-6">
                            <textarea name="description" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Scheduled task</label>
                        <div class="col-sm-6">
                            <input type="text" name="cron" class="form-control" placeholder="cron expression: minute hour day month week">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Email address</label>
                        <div class="col-sm-6">
                            <input type="text" name="mails" placeholder="Separate multiple email with commas (,)" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Test tool</label>
                        <div class="col-sm-6">
                            <select name="engine" class="form-control">
                                <option value="jmeter">jmeter</option>
                                <option value="locust">locust</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Load machine</label>
                        <div class="col-sm-6">
                            <input type="text" name="workers" class="form-control" onchange="onChangeVal(this);" value="" placeholder="Format: ip,username,password">
                        </div>
                        <input type="button" onclick="div_add()" value="Add"/>
                    </div>
                    <div id="append"></div>
                    <div align="center">
                    	<input type="button" name="Submit" class="btn btn-primary" onclick="javascript:history.back(-1);" value="Back">
                        <button type="button" class="btn btn-primary" onclick="save()">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock%}

{% block javascript %}
<script type="text/javascript">
	var divId = 1;
	function div_add() {
		var divA = document.getElementById("append");
		var out = '<div class="form-group" id="'+divId+'">'
                        +'<label class="col-sm-2 control-label"></label>'
                        +'<div class="col-sm-6">'
                            +'<input type="text" name="workers" class="form-control" onchange="onChangeVal(this);" value="" placeholder="Format: ip,username,password">'
                        +'</div>'
                        +'<input type="button" onclick="del('+divId+')" value="Delete"/>'
                    +'</div>';
		divA.innerHTML = divA.innerHTML+out;
		divId += 1;
	};
	function del(divId) {
		document.getElementById(divId).remove();
	}
	function onChangeVal(e) {
    	e.setAttribute("value", e.value);
	}
    function save() {
    	var data = $("#form_save").serialize();
    	$.ajax({
			type: 'POST',
			url: "/atp4p/project/add/",
			data: data,
			contentType: "application/x-www-form-urlencoded;charset=UTF-8",
			success: function(res){
				var code = res.code;
				if(code == 0){
					alert("Created successfully!")
					window.location.href="/atp4p/project/";
				}else{
					alert("Creation failure!"+res.msg)
				}
			},
			error: function(res){
				alert("Creation failure!")
			}
		});
    };
</script>
{% endblock %}